<template>
  <div class="bg-[#f5f5f5] py-6">
    <div class="w-[80%] m-auto bg-white p-4">
      <a-row :gutter="20">
        <a-col :span="18">
          <div class="border-solid border-[#cccccc] border-b-[1px] border-0 flex items-center">
            <a href="#" class="bg-[#267391] !text-white text-xl rounded-t-lg px-6 py-2 font-black">思想政工</a>
            <a v-for="item in linst1" :key="item" href="#" class="!text-black text-xl mx-7" >{{
                item
              }}</a>
          </div>
          <div v-for="item in linst2" :key="item.title" class="flex flex-col" >
            <div class="border-dashed my-2 border-[#cccccc] border-b-[1px] border-0 flex items-center justify-between" >
              <a href="#" class="text-xl rounded-t-lg py-2 font-black !text-[#346c83]" >{{ item.title
                }}</a>
              <a href="#" class="!text-[#9c9c9c] flex items-center" >更多
                <a-icon type="double-right" ></a-icon>
              </a>
            </div>
            <a-list :data-source="item.desc" :split="false" size="small" >
              <template slot="renderItem" slot-scope="item, index1">
                <a-list-item class="!p-1" >
                  <div class="!truncate w-[80%]" >
                    <a-badge color="#aaaaaa"  />
                    <a href="#" class="!text-black" >{{
                      item.title
                      }}
                    </a>
                  </div>
                  <template slot="extra">
                    <a href="#" class="!text-[#9c9c9c]" >{{
                        item.time
                      }}
                    </a>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </div>

          <div class="border-solid border-[#cccccc] border-b-[1px] border-0 mt-4 flex items-center">
            <a href="#" class="bg-[#267391] !text-white text-xl rounded-t-lg px-6 py-2 font-black">剑舞保障</a>
            <a v-for="item in linst3" :key="item" href="#" class="!text-black text-xl mx-7" >{{
                item
              }}</a>
          </div>
          <div v-for="(item, index) in linst4" :key="item.title" class="flex flex-col" >
            <div class="border-dashed border-[#cccccc] border-b-[1px] my-2 border-0 flex items-center justify-between" >
              <a href="#" class="text-xl rounded-t-lg py-2 font-black" :class="{
                '!text-black': index == 2,
                '!text-[#346c83]': index != 2
              }" >{{
                item.title
                }}</a>
              <a href="#" class="!text-[#9c9c9c] flex items-center" >更多
                <a-icon type="double-right" ></a-icon>
              </a>
            </div>
            <a-list :data-source="item.desc" :split="false" size="small" >
              <template slot="renderItem" slot-scope="item, index1">
                <a-list-item class="!p-1" >
                  <div class="!truncate w-[80%]" >
                    <a-badge color="#aaaaaa"  />
                    <a href="#" class="!text-black" >{{
                      item.title
                      }}
                    </a>
                  </div>
                  <template slot="extra">
                    <a href="#" class="!text-[#9c9c9c]" >{{
                        item.time
                      }}
                    </a>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="bg-[#e5e5e5] p-4">
            <p class="mb-2">
              <a href="#" class="!text-black font-black text-lg">对外交流</a>
            </p>

            <div class="relative overflow-hidden mb-4" v-for="(item, index) in linst7" :key="index" >
              <a href="#" >
                <img width="100%" :src="item.src" />
              </a>
              <div class="bg-[#1b6fcb]/50 absolute bottom-0 py-2 w-full flex justify-center items-center" >
                <a href="#" class="pl-2 font-black !text-white !whitespace-nowrap !truncate" >
                  {{ item.title }}
                </a>
              </div>
            </div>
            <div class="!mb-0 text-right">
              <a href="#" class="!text-[#9c9c9c] flex items-center">更多
                <a-icon type="double-right"></a-icon>
              </a>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="bg-[#e5e5e5] py-2 mt-3 flex">
        <a v-for="(item, index) in linst5" :key="item" href="#" class="mx-5 text-lg font-black" :class="{
          '!text-[#4c6675]': index == 0,
          '!text-black': index != 0
        }" >{{ item }}</a>
      </div>
      <div class="bg-[#e5e5e5] px-2 py-4 mt-6 rounded-sm flex items-center">
        <div class="flex flex-col w-[10%]">
          <a href="#" class="!text-[#4c6675] text-xl font-black mb-2">全国检察院</a>
          <a href="#" class="!text-[#4c6675] text-xl font-black">门 户 网
            站</a>
        </div>
        <div class="flex flex-wrap w-[90%] rounded-sm justify-between">
          <div class="w-[9%]" :class="{ 'mb-1': index <= 21 }" v-for="(item, index) in linst6" :key="item" >
            <a href="#" class="!text-black font-bold" >{{ item
            }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      linst1: [
        '机关党建', '队伍建设', '纪检监察',
      ],
      linst2: [
        {
          title: '国际合作协议',
          desc: [
            {
              title: '中欧新能源联合实验室在布鲁塞尔揭牌',
              time: '2025-10-09'
            },
            {
              title: '一带一路数字经济走廊首批项目签约',
              time: '2025-11-15'
            },
            {
              title: '亚太自贸区跨境支付系统完成压力测试',
              time: '2025-09-28'
            }
          ]
        },
        {
          title: '社会民生热点',
          desc: [
            {
              title: '全国统一电子社保卡实现就医全流程应用',
              time: '2025-08-01'
            },
            {
              title: '老旧小区适老化改造标准2.0版发布',
              time: '2025-07-22'
            },
            {
              title: '跨省异地急诊费用直接结算覆盖县级医院',
              time: '2025-09-05'
            },
            {
              title: '安徽铜陵:一体推动党建业务双向赋能',
              time: '2025-08-01'
            },
            {
              title: '最高检:积极应用大数据法律监督模型服务高质效办案.0版发布',
              time: '2025-07-22'
            },
            {
              title: '云南:传达学习习近平总书记考察云南重要讲话精神',
              time: '2025-09-05'
            }
          ]
        }
      ],
      linst3: [
        '司法改革', '检察技术', '检察文化',
      ],
      linst4: [
        {
          title: '金融监管动态',
          desc: [
            {
              title: '银保监会发布外资银行准入负面清单2.0版',
              time: '2025-04-12'
            },
            {
              title: '央行数字人民币跨境支付系统正式上线',
              time: '2025-05-08'
            },
            {
              title: '证监会启动上市公司风险智能预警系统',
              time: '2025-03-25'
            }
          ]
        },
        {
          title: '科技创新应用',
          desc: [
            {
              title: '工信部公布人工智能伦理审查国家标准',
              time: '2025-06-18'
            },
            {
              title: '国家超算中心开放量子计算模拟平台',
              time: '2025-04-30'
            },
            {
              title: '区块链电子存证系统覆盖全国法院',
              time: '2025-07-01'
            },
            {
              title: '卫星互联网运营牌照首批发放完成',
              time: '2025-05-22'
            }
          ]
        },
        {
          title: '生态治理进展',
          desc: [
            {
              title: '黄河流域碳排放智能监测体系投入运行',
              time: '2025-08-15'
            },
            {
              title: '全国海洋生态修复基金启动募集',
              time: '2025-09-10'
            },
            {
              title: '工业遗址土壤修复技术白皮书发布',
              time: '2025-07-30'
            },
            {
              title: '国家公园生态补偿条例公开征求意见',
              time: '2025-06-05'
            },
            {
              title: '最高人民检察院检察理论研究课题管理办法',
              time: '2025-08-15'
            },
            {
              title: '以"可诉性"为核心促进检察公益诉讼制度高质效运转',
              time: '2025-09-10'
            },
            {
              title: '深化社会危险性评估机制完善逮捕制度',
              time: '2025-07-30'
            },
            {
              title: '推动建立海陆全域联动执法机制',
              time: '2025-06-05'
            }
          ]
        }
      ],
      linst5: [
        '子网专网', '国家检察官学院', '检察日报社', '中国检察出版社',
      ],
      linst6: ["北京", "天津", "河北", "山西",
        "内蒙古", "辽宁", "吉林", "黑龙江", "上海", "江苏",
        "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北",
        "湖南", "广东", "广西", "海南", "重庆", "四川", "贵州",
        "云南", "西藏", "陕西", "甘肃", "青海", "宁夏", "新疆", "兵团", ""],
      linst7: [
        {
          "src": "https://picsum.photos/id/1018/460/250",
          "title": "科学家发现新型太阳能电池材料"
        },
        {
          "src": "https://picsum.photos/id/1015/460/250",
          "title": "故宫博物院新展：清代宫廷服饰展"
        },
        {
          "src": "https://picsum.photos/id/1019/460/250",
          "title": "国际环保组织呼吁减少塑料使用"
        },
        {
          "src": "https://picsum.photos/id/1020/460/250",
          "title": "全球首条超级高铁线路规划公布"
        },
        {
          "src": "https://picsum.photos/id/1022/460/250",
          "title": "天文学家发天文学家发现类地行星，或存在生命迹象现类地行星，或存在生命迹象"
        }
      ]
    }
  }
}
</script>
<style scoped></style>